{include file="common/head"/}
<link rel="stylesheet" href="__STATIC__/plugins/layui/css/layui.css">
<style>
    .order-box{
        width: 100%;
        /*height: 1555px;*/
        border: 1px solid red;
    }
    .order-top{
        width: 100%;
        height: 380px;
        background: green;
    }
    .order-center{
        width: 1440px;
        height: 1555px;
        margin: 0 auto;
        border: 1px solid hotpink;
    }
    .center-tetle-bti{
        width: 266px;
        margin: 94px auto 63px;
        color: #000000;

    }
    .center-tetle-ms{
        color: #656565;
        margin-bottom: 122px;
    }
    .center-prompting{
        width: 100%;
        height: 260px;
        margin: 0 auto;
        border-bottom: 1px solid #e5e5e5;
    }
    .prompting-img{
        width: 1356px;
        height: 102px;
        margin: 0 auto;
        margin-bottom: 44px;
        border: 1px solid navajowhite;
    }
    .wz-left{
        float: left;
        font-size: 20px;
        color: #2e88c4;
    }
    .wz-right{
        float: right;
        font-size: 20px;
        color: #2e88c4;
    }
    .prompting-wz-to{
        margin: 0 0 0 448px;
    }
    .center-view{
        width: 100%;
        height: 180px;
        margin-top: 80px;
        border: 1px solid black;
    }
    .view-top{
        width: 100%;
        height: 86px;
    }
    .view-foot{
        font-size: 22px;
        color: #333333;
    }
    .view-top li{
        float: right;
        color: #747474;
    }
    .center-list{
        width: 100%;
    }
    .list-box{
        width: 100%;
        height: 264px;
        padding: 28px 0;
        border: 1px solid #e5e5e5 ;
    }
    .list-box .list-f{
        float: left;
    }
    .list-box .list-left{
        width: 182px;
        height: 100%;
        border-right: 1px solid #e5e5e5;
    }
    .list-box .list-right{
        width: 1136px;
        height: 190px;
        margin: 30px 0 30px 74px;
        border: 1px solid lime;
    }
    .list-box .list-right .list-key{
        color: #999999;
        font-size: 18px;
    }
    .list-box .list-right .list-val{
        color: #666666;
        font-size: 18px;
    }
    .list-box .list-right .layui-btn{
        padding: 0 13px;

    }
</style>
<div class="order-box">
    <div class="order-top">
        <img src="" alt="">
    </div>
    <div class="order-center">
        <div class="center-tetle">
            <h2 class="center-tetle-bti">ORDER CENTER</h2>
            <h3 class="center-tetle-ms">Order centter is helping you effectively place your order. Also，you can receive a more precise reply about your inquiry via order send unfamiliar ring. He fumbled for the bedside lamp and turned it on Squinting at his surroundings he saw a piush Renaissance.</h3>
        </div>
        <div class="center-prompting">
            <div class="prompting-img">

            </div>
            <div class="prompting-wz">
                <ul>
                    <li class="wz-left">SIGN & SHIPPING</li>
                    <li class="wz-left prompting-wz-to">CHECK OUT</li>
                    <li class="wz-right">PLACE ORDER</li>
                </ul>
            </div>
        </div>
        <div class="center-view">
            <ul class="view-top">
                <li>List</li>
                <li style="width: 73px">Bar</li>
                <li style="width: 73px;">View:</li>
            </ul>

            <div class="view-foot">Ink Cartridge chips</div>
        </div>
        <div class="center-list">
            <ul>
                <li class="list-box">
                    <div style="height: 243px">
                        <div class="list-left list-f" >
                           <div style="width: 40px;height: 40px;margin:100px auto">
                               <input style="width: 40px;height: 40px" type="checkbox" name="" title="写作" checked>
                           </div>
                        </div>
                        <div class="list-right list-f">
                            <ul>
                                <li class="list-f" style="width:412px">
                                   <div class="list-key list-f">Apex Code</div>
                                    <div class="list-val list-f" style="margin-left:35px ">ALC-5050-K-2.2K</div>
                                </li>
                                <li class="list-f" style="width: 409px">
                                    <div class="list-key list-f">OEM Code</div>
                                    <div class="list-val list-f" style="margin-left:40px">CRG-731H/331H</div>
                                </li>
                                <li class="list-f" style="width: 190px">
                                    <div class="list-key list-f">Color</div>
                                    <div class="list-f" style="margin-left:48px">S</div>
                                </li>
                                <li class="list-f">
                                    <div class="layui-btn-group" style="border: 1px solid #b5b5b5;border-radius: 4px">
                                        <div class="layui-btn-group">
                                            <button class="layui-btn" style="background: #2f88c4;">+</button>
                                            <button class="layui-btn" style="background: white;color: black">4</button>
                                            <button class="layui-btn" style="background: #2f88c4">-</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                </li>
            </ul>
        </div>
    </div>
</div>
{include file="common/footer"/}